<template>
    <div class="page-container">

        <el-row>
            <el-button type="primary" size="small" @click="addNav">添加导航栏</el-button>
        </el-row>
        <div class="table-box">
            <el-table :data="list" size="small" row-key="id"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" style="margin-top:10px">
                <el-table-column prop="sort" label="排序" align="center"></el-table-column>
                <el-table-column prop="navBarName" label="导航栏名称"></el-table-column>
                <el-table-column prop="navUrl" label="导航栏地址" align="center"></el-table-column>
                <el-table-column label="是否是外链" align="center">
                    <template #default="scope">
                        <el-tag class="ml-2" v-if="scope.row.isFrame == '1'" size="small" type="success">是</el-tag>
                        <el-tag class="ml-2" v-else type="warning" size="small">否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="小程序显示" align="center">
                    <template #default="scope">
                        <el-tag class="ml-2" v-if="scope.row.wechatStatus == '1'" size="small" type="success">是</el-tag>
                        <el-tag class="ml-2" v-else type="warning" size="small">否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100px" align="center" fixed="right">
                    <template #default="scope">
                        <el-button type="primary" link @click="handleEdit(scope.row)" size="small">编辑</el-button>
                        <el-button type="primary" link @click="delItem(scope.row)" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <nav-form-detail v-model:dialogDrawer="dialogFormVisible" :title="title" :default-form="form"
            @onDetailSubmit="detailSubmit" :classify-list="classifyList" :article-class="classList"></nav-form-detail>
    </div>
</template>
  
<script>
import { reactive, toRefs, onMounted } from 'vue'
import { changeDetSelect, handleTree } from '/@/utils/utils'
import { ElMessage, ElMessageBox } from 'element-plus'
import NavFormDetail from './NavFormDetail.vue'
import { getTreeList, remove, updateStatus, getTempInfoByEnterpriseId } from '/@/api/ws/nav'
import api from '/@/api/commonApi'
export default {
    name: 'NavTree',
    components: {
        NavFormDetail
    },
    setup() {
        const state = reactive({
            search: { tempId: 0 },
            classifyList: [],
            classList: [],
            statusList: [{
                label: '显示',
                value: 1
            }, {
                label: '隐藏',
                value: 0
            }],
            list: [],
            total: 0,
            current: 1,
            page: 10,
            title: '新增分类',
            dialogFormVisible: false,
            form: {
                parentId: 0,
                name: '',
                icon: '',
                sort: 1,
                showStatus: 1
            },
            editId: '',
            dialogMaterialVisible: false,
            tempInfo: {}
        })
        const handleChange = () => {
            getList()
        }
        const filterSubmit = () => {
            getList()
        }
        const getList = async () => {
            state.search.tempId = state.tempInfo.tempId
            await getTreeList(state.search).then(res => {
                state.list = handleTree(res.data, 'id');
            })
        }
        const addNav = () => {
            getClassifyTree()
            getClassList()
            state.dialogFormVisible = true
            state.title = '新增导航栏'
            state.form.navBarName = ''
            state.form.id = ''
            state.form.parentId = [0]
            state.form.showStatus = 1
            state.form.isFrame = 0
            state.form.sort = 1
            state.form.wechatStatus = 1
            state.form.classId = '',
            state.form.navUrl = null
            state.form.pageId = null
            state.form.tempId = state.tempInfo.tempId

        }
        const getClassifyTree = () => {
            getTreeList({tempId:state.tempInfo.tempId,parentId:0}).then(res => {
                state.classifyList = res.data
            })
        }
        const getClassList = () => {
            api.articleClass().then(res => {
                if(res.code == 0){
                    state.classList = res.data
                }
            })
        }
        const changeStatus = (row) => {
            updateStatus({ id: row.id, showStatus: row.showStatus }).then(res => {
                if (res.code == 0) {
                    ElMessage.success('修改成功')
                } else {
                    ElMessage.error('修改失败:' + res.message)
                }
            })
        }
        const handleEdit = (row) => {
            getClassifyTree()
            getClassList()
            // state.editId = row.id
            const parentId = changeDetSelect(row.parentId, state.classifyList)
            state.form = {
                navBarName: row.navBarName,
                id: row.id,
                parentId: parentId.length < 1 ? ['0'] : parentId,
                showStatus: parseInt(row.showStatus),
                navUrl: row.navUrl,
                tempId: row.tempId,
                pageId: row.pageId,
                isFrame: parseInt(row.isFrame),
                wechatStatus: parseInt(row.wechatStatus),
                classId: row.classId,
                sort: row.sort
            }
            state.title = '编辑导航栏'
            state.dialogFormVisible = true
        }
        const delItem = row => {
            ElMessageBox.confirm(
                '是否确认删除名称为"' + row.navBarName + '"的数据项？',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
                remove(row.id).then(res => {
                    if (res.code == 0) {
                        ElMessage.success('删除成功')
                        getList()
                    } else {
                        ElMessage.error('删除失败:' + res.message)
                    }
                })

            }).catch()
        }
        const handleSizeChange = () => {
            getList()
        }
        const handleCurrentChange = e => {
            state.current = e
            getList()
        }
        const detailSubmit = () => {
            getList()
            state.dialogFormVisible = false
        }
        const filterReset = () => {
            state.search = { tempId: 0 }
            getList()
        }
        const getTempInfo = async () => {
            await getTempInfoByEnterpriseId().then(res => {
                state.tempInfo = res.data
            })
        }

        onMounted(async () => {
            await getTempInfo()
            await getList()
        })
        return {
            ...toRefs(state),
            filterSubmit,
            handleChange,
            addNav,
            changeStatus,
            delItem,
            getClassList,
            handleEdit,
            handleSizeChange,
            handleCurrentChange,
            getClassifyTree,
            detailSubmit,
            filterReset,
            getTempInfo
        }
    }
}
</script>
  
<style lang="scss" scoped>
.table-box {
    background: var(--next-color-white);

    :deep(.el-table__header-wrapper .el-table__cell) {
        background: var(--el-color-primary-light-9);
        color: var(--next-bg-menuBar-light-1);
    }
}
</style>